<template>
	<view class="list">
		<view class="list_item" v-for="(item,index) in data" :key="index">
			<!-- <view class="imageview">
				<image class="coverImg" :src="item.coverImg" mode="scaleToFill"></image>
			</view> -->

			<view class="content-sum">
				<view class="content" @click="navigatorTo(data,index)">
					<view class="title">
						{{item.title}}
					</view>
					<view class="info">
						<text>分享人：{{item.shareUser}}</text>
						<text class="share-date">分类：{{item.chapterName}}</text>
						<text class="share-date">时间：{{item.niceDate}}</text>
						<view class="tag">
							<view class="tag-item" v-for="item1 in item.tags">
								{{item1.name}}
							</view>
						</view>

					</view>
				</view>

				<view class="collect" @click='collect(data,index)'>
					<!-- v-if="data.collect" -->
					<u-icon v-if="data[index].collect==true" name="star-fill" color="#2979ff" size="28"></u-icon>
					<u-icon v-if="data[index].collect==false" name="star" color="#2979ff" size="28"></u-icon>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: ['data','index'], //
		data() {
			return {

			}
		},
		methods: {
			navigatorTo(data, index) {
				this.$emit('clickItem', data[index])
			},
			collect(data, index) {
				
				
				console.log('点击收藏'+data[index].id+data[index].collect);
				if(data[index].collect){
					// lg/uncollect_originId/2333/json
					this.$u.post('/lg/uncollect_originId/'+data[index].id+'/json').then((res) => {
						
						console.log('成功');
						this.$emit('clickItemCollect', data[index])
						this.data[index].collect = false

					}).catch((res) => {
						console.log('失败');
					})
				}else{
					this.$u.post('/lg/collect/'+data[index].id+'/json').then((res) => {
						console.log('成功');
						this.$emit('clickItemCollect', data[index])
						this.data[index].collect = true
					}).catch((res) => {
						console.log('失败');
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.list {
		// display: flex;
		// justify-content: space-between;
		// flex-wrap: wrap;

		.list_item {
			// width: 355rpx;
			display: flex;
			align-items: center;
			padding: 10px;
			border-bottom: 1px solid #f6f6f6;

			.imageview {
				width: 120rpx;
				height: 120rpx;

				.coverImg {
					width: 120rpx;
					height: 120rpx;
				}
			}

			.content-sum {
				display: flex;
				width: 100%;
				justify-content: space-between;

				.content {
					padding: 5px 10px;

					.title {
						font-size: 30rpx;
					}

					.info {
						padding-top: 10px;
						font-size: 26rpx;

						.share-date {
							padding: 20px;
						}

						.tag {
							display: flex;
							position: relative;
							font-size: 20rpx;

							.tag-item {
								margin-left: 5rpx;
							}
						}
					}
				}

				.collect {
					display: flex;
				}
			}

		}
	}
</style>
